<template>
    <div class="">
        <div class="tabs">
            <el-tabs
                v-model="activeName"
                @tab-click="handleClick"
                v-if="notEmpty(menus)"
            >
                <el-tab-pane
                    v-for="item in menus"
                    :key="item.name"
                    :label="item.name"
                    :name="item.key"
                >
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="notEmpty(infoData)">
            <keep-alive>
                <component
                    :is="currentCom"
                    v-model="infoData"
                    :state="state"
                    :type="type"
                ></component>
            </keep-alive>
        </div>
    </div>
</template>

<script>
import Details from "./details";
import PayTable from "./payTable";
import PriceSheet from "./priceSheet";
import Profit from "./profit";

export default {
    name: "ApplyDetails",
    components: { Details, PayTable, PriceSheet, Profit },
    props: {
        value: {
            required: false,
        },
    },
    data() {
        return {
            activeName: "first",
            loading: true,
            menus: [
                // {
                //     name: "内部报价详情",
                //     key: "first",
                //     com: "Details",
                // },
                // {
                //     name: "租金支付表",
                //     key: "second",
                //     com: "PayTable",
                // },
                // {
                //     name: "对外报价单",
                //     key: "third",
                //     com: "PriceSheet",
                // },
                // {
                //     name: "财务利润测算",
                //     key: "fourth",
                //     com: "Profit",
                // },
            ],
        };
    },
    computed: {
        infoData: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
        calcSchemeId() {
            return this.$route.query.calcSchemeId;
        },
        id() {
            return this.$route.query.id;
        },
        state() {
            return "readonly";
        },
        type() {
            return "preview";
        },
        currentCom() {
            let item = this.menus?.find((e) => e.key == this.activeName);
            return item?.com;
        },
    },
    created() {
        // if (this.calcSchemeId) {
        //     this.getDetails(this.calcSchemeId);
        // } else {
        //     this.initData();
        //     this.loading = false;
        // }
        this.menus.push({
            name: "内部报价详情",
            key: "first",
            com: "Details",
        });
        if (this.checkPermi(["quota:apply:detail:payTable"])) {
            this.menus.push({
                name: "租金支付表",
                key: "second",
                com: "PayTable",
            });
        }
        if (this.checkPermi(["quota:apply:detail:priceSheet"])) {
            this.menus.push({
                name: "对外报价单",
                key: "third",
                com: "PriceSheet",
            });
        }
        if (this.checkPermi(["quota:apply:detail:profit"])) {
            this.menus.push({
                name: "财务利润测算",
                key: "fourth",
                com: "Profit",
            });
        }
    },
    mounted() {},
    methods: {
        flow_submit() {
            console.log("flow_submit");
            this.$emitter.emit("setchangeState");
        },
        handleClick() {},
    },
};
</script>

<style lang="scss" scoped>
.tabs {
    margin: 20px;
    padding: 5px 20px 0;
    background-color: #fff;
    border-radius: 8px;
    // margin-top: 0;
}
.containerBox {
    min-height: calc(100vh - 220px);
    display: flex;
}
.content_tabs123 {
    flex: 1;
    min-width: 0;
}
</style>
